import React from 'react';
import {SafeAreaView, ScrollView, Image, StyleSheet} from 'react-native';
import {Text, View} from 'native-base';
import {RectButton} from 'react-native-gesture-handler';
import {size, colors} from '@/config';
import Icon from 'react-native-vector-icons/AntDesign';
import NavigationService from '@/NavigationService';
import {Button} from 'native-base';
import {signOut} from '@/utils/auth';
const {px} = size;

export default function Profile() {
  async function handleSignout() {
    const res = await signOut();
    if (res) {
      NavigationService.navigate('SignedOut');
    }
  }
  return (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView>
        <View style={styles.info}>
          <View style={styles.top}>
            <View style={styles.nameLine}>
              <View style={styles.avatarWrap}>
                <Image
                  source={require('@/assets/image/profile/avatar.png')}
                  style={styles.avatar}></Image>
                <Text style={styles.nameFont}>
                  我的名字
                  <Icon name="github" size={16} color={colors.white} />
                </Text>
              </View>
              <RectButton>
                <View style={styles.confirm}>
                  <Image
                    source={require('@/assets/image/profile/member.png')}
                    style={styles.member}></Image>
                  <Text style={styles.confirmTitle}>修改</Text>
                </View>
              </RectButton>
            </View>
          </View>
          <View style={styles.cardOne}>
            <View style={styles.line}>
              <Text style={styles.cardTitle}>我的订单</Text>
              <RectButton
                style={styles.checkAll}
                onPress={() => NavigationService.navigate('MyOrder')}>
                <Text style={styles.checkFont}>查看全部</Text>
              </RectButton>
            </View>
            <View style={styles.hrOne}></View>
            <View style={styles.line2}>
              <Text>orders</Text>
            </View>
          </View>

          <View style={styles.cardTwo}>
            <View style={styles.line}>
              <Text style={styles.cardTitle}>更多功能</Text>
            </View>
            <View style={styles.hrOne}></View>
            <View style={styles.line2}>
              <Text>mor</Text>
            </View>
          </View>
        </View>
        <Button full onPress={handleSignout}>
          <Text style={{color: 'white'}}>退出登录</Text>
        </Button>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  info: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.bgGray,
  },
  top: {
    width: '100%',
    height: px(150),
    backgroundColor: colors.primary,
    position: 'relative',
  },
  nameLine: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    position: 'absolute',
    left: 0,
    bottom: px(18),
  },
  avatarWrap: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    marginLeft: px(16),
    marginRight: 10,
    height: px(60),
    width: px(60),
    borderRadius: px(30),
  },
  nameFont: {
    fontFamily: 'PingFang SC',
    fontStyle: 'normal',
    fontWeight: '600',
    fontSize: px(17),
    lineHeight: px(24),
    color: '#FFFFFF',
  },
  confirm: {
    width: px(100),
    paddingLeft: px(10),
    height: px(32),
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: px(16),
    borderBottomLeftRadius: px(16),
    flexDirection: 'row',
  },
  member: {
    margin: px(8),
    marginRight: 0,
    width: px(16),
    height: px(16),
  },
  confirmTitle: {
    margin: px(6),
    fontFamily: 'PingFang SC',
    fontStyle: 'normal',
    fontWeight: '600',
    fontSize: px(12),
    lineHeight: px(20),
    color: '#36C678',
  },
  cardOne: {
    alignContent: 'center',
    height: px(130),
    width: '93%',
    backgroundColor: '#FFFFFF',
    borderColor: '#FAFAFA',
    borderStyle: 'solid',
    borderRadius: px(6),
    marginTop: px(23),
  },
  line: {
    flexDirection: 'row',
  },
  cardTitle: {
    width: '70%',
    margin: px(12),
    fontFamily: 'PingFang SC',
    fontStyle: 'normal',
    fontWeight: '600',
    fontSize: px(16),
    lineHeight: px(22),
    color: '#000000',
  },
  hrOne: {
    height: px(1),
    width: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
  },
  line2: {
    flexWrap: 'wrap',
    flexDirection: 'row',
    // justifyContent: 'center',
    marginTop: px(10),
  },
  item: {
    marginTop: px(12),
    width: '33%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  item2: {
    marginTop: px(12),
    width: '25%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  rectangle: {
    width: px(30),
    height: px(28),
    margin: 'auto',
  },
  rectangle2: {
    width: px(40),
    height: px(40),
    marginBottom: 5,
  },
  desc: {
    fontFamily: 'PingFang SC',
    fontStyle: 'normal',
    fontSize: px(12),
    lineHeight: px(17),
    textAlign: 'center',
  },
  checkAll: {
    margin: px(12),
    flexDirection: 'row',
    textAlign: 'right',
  },
  checkFont: {
    marginTop: px(6),
    fontFamily: 'PingFang SC',
    fontStyle: 'normal',
    fontSize: px(12),
    lineHeight: px(14),
    textAlign: 'right',
  },
  iconRight: {
    marginTop: px(6),
  },
  cardTwo: {
    alignContent: 'center',
    height: px(86),
    width: '93%',
    backgroundColor: '#FFFFFF',
    borderColor: '#FAFAFA',
    borderStyle: 'solid',
    borderRadius: px(6),
    marginTop: px(23),
    marginBottom: px(89),
  },
  left8: {
    marginLeft: px(8),
  },
});
